<template>
  <div class="content-header">
    <div class="head-left">
      <el-icon class="collapse-icon" @click="toggleCollapse">
        <Expand v-if="isCollapse" />
        <Fold v-if="!isCollapse" />
      </el-icon>
      <el-page-header icon="" :title="getPageTitle()" />
    </div>

    <div class="user-avatar">
      <el-dropdown>
        <div class="avatar-wrapper">
          <el-avatar
            :size="32"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <div class="user-info-dropdown">
              <div class="user-info-header">
                <el-avatar
                  :size="48"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                />
                <div class="user-details">
                  <div class="username">admin</div>
                  <div class="email">626906218@qq.com</div>
                </div>
              </div>
              <el-dropdown-item @click="$router.push('/personal')">
                <span>个人资料</span>
              </el-dropdown-item>
              <el-dropdown-item @click="$router.push('/account')">
                <span>账户</span>
              </el-dropdown-item>
              <el-dropdown-item divided class="logout-item">
                <el-icon><SwitchButton /></el-icon>
                <span>退出</span>
              </el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import {
  Expand,
  Fold,
  Document,
  User,
  Setting,
  SwitchButton,
} from "@element-plus/icons-vue";

const props = defineProps<{
  isCollapse: boolean;
}>();

const emit = defineEmits(["update:isCollapse"]);

const toggleCollapse = () => {
  emit("update:isCollapse", !props.isCollapse);
};

const route = useRoute();
const getPageTitle = () => route.meta.title || "";
</script>

<style scoped lang="scss">
.content-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: space-between;
}

.head-left {
  display: flex;
  align-items: center;

  .collapse-icon {
    cursor: pointer;
    margin-right: 10px;
    font-size: 20px;
  }

  .collapse-icon:hover {
    color: #00a870;
  }
}

.user-avatar {
  display: flex;
  align-items: center;

  .avatar-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}

.user-info-dropdown {
  padding: 10px;
  width: 200px;

  .user-info-header {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;

    .user-details {
      margin-left: 12px;

      .username {
        font-weight: 500;
        font-size: 14px;
      }

      .email {
        font-size: 12px;
        color: #909399;
      }
    }
  }

  .el-dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;

    .el-icon {
      margin-right: 8px;
      font-size: 16px;
    }
  }

  .logout-item {
    color: #f56c6c;

    &:hover {
      color: #f56c6c;
      background-color: #fff;
    }
  }
}
</style>
